<template>
  <el-row>
    <el-col>
      <el-menu
        v-for="item in commonRouters"
        :key="item.path"
        class="el-menu-vertical-demo"
        :router="true"
        :default-active="activeIdx"
      >
        <el-menu-item :index="item.path">
          <el-icon>
            <location />
          </el-icon>
          <span>{{ item.menuTitle }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>
<!--@select="doHandle"-->
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const { routes } = defineProps(['routes'])
const commonRouters = ref(routes)
const router = useRouter()
const route = useRoute()
let activeIdx = ref()
activeIdx.value = route.path
router.afterEach((to, from) => {
  activeIdx.value = to.path
})
</script>

<script lang="ts"></script>

<style lang="scss" scoped></style>